<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        // map 字典 一种数据结构 ，类似对象 。补全了对象的不足 ；
        // 对象的键名只能是字符串 ；
        // map的键名可以是任意类型 ；

        // 1.创建一个map
        // 方式一：
        // var map = new Map([["name","张三"],["age",20],["height","178cm"]]) ; // 二维数组，数组里的第一项就是 map的键名，第二个就是键值 
        // console.log(map);

        // 方式二：
        // var map = new Map();
        // // 设置map的键名和键值
        // map.set("name","张三");
        // map.set("age",20);
        // console.log(map);
        // var myobj = {key:"val"}
        // // var  obj = {
        // //     [myobj]:"张三"
        // // }
        // // console.log(obj);
        // var map = new Map();
        // map.set(myobj,"val");
        // console.log(map);

        // 2. 获取 map里的键值 ；var 键值 =  map.get(键名);
        // var map = new Map([["name","张三"],["age",20]]);
        // var myname =  map.get("name");
        // console.log(myname);


        // 3.keys 和 values : 获取 map数据的键名和键值 ；
        // var map = new Map([["name","张三"],["age",20]]);
        // // 获取键名
        // console.log( map.keys());
        // // 获取键值 
        // console.log(map.values());

        // 4.删除指定元素
        // map.delete("键名")：删除 指定元素
        // map.clear(); 删除map里的所有元素

        // var map = new Map([["name","张三"],["age",20]]);

        // // map.delete("age");
        // // console.log(map);
        // map.clear();
        // console.log(map);

        // 5.获取map的长度 
        // var map = new Map([["name","张三"],["age",20]]);
        // console.log(map.size);

        // 6.has 判断 map里是否拥有某个键名
        // var map = new Map([["name","张三"],["age",20]]);
        // console.log(map.has("name"));

        
        // 把元素作为map的键名 

        // 对象 
        // let lis = document.querySelectorAll("li");
        // var arr = [];
        // lis.forEach((li,key)=>{
        //     var obj = {};
        //     obj['ele'] = li;
        //     if(key==0){
        //         obj['color'] = "red";
        //     }else if(key==1){
        //         obj['color'] = "yellow";
        //     }else {
        //         obj['color'] = "blue";
        //     }
        //     arr.push(obj);
        // })
        // console.log(arr);

        // arr.forEach(item=>{
        //     item.ele.style.color = item.color;
        // })


        // map数据

        let lis = document.querySelectorAll("li");

        var map = new Map();
        map.set(lis[0],"red");
        map.set(lis[1],"yellow");
        map.set(lis[2],"blue");
        console.log(map);

        map.forEach((item,key)=>{
            key.style.color = item;
        })
        



    </script>
</body>
</html>